<template>
  <div class="user-info-card">
    <a-card
      class="info-container"
      :title="title || 'User Infomation'"
      :bordered="false"
    >
      <div class="avatar-container">
        <a-avatar v-if="avatar != null" :src="avatar" size="large" />
        <a-avatar v-else icon="user" size="large" />
      </div>
      <div class="base-info-container">
        <div class="left-container">
          <p>ID</p>
          <p>Username</p>
          <p>User Number</p>
          <p>Phone Number</p>
          <p>Age</p>
          <p>Gender</p>
        </div>
        <div class="right-container">
          <p>{{ id || -1 }}</p>
          <p>{{ userName || "暂无" }}</p>
          <p>{{ userNumber || "暂无" }}</p>
          <p>{{ phoneNumber || "暂无" }}</p>
          <p>{{ age || -1 }}</p>
          <p>{{ gender || "暂无" }}</p>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    avatar: String,
    id: Number,
    userName: String,
    userNumber: String,
    phoneNumber: String,
    age: Number,
    gender: String,
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scope>
.center() {
  align-items: center;
  justify-content: center;
}
.user-info-card {
  padding: 30px;
  background: #ececec;

  .avatar-container {
    width: 100%;
    display: flex;
    .center();
  }

  .info-container {
    width: 100%;

    .base-info-container {
      margin: 20px 0 0 0;
      display: flex;
      .left-container {
        width: 40%;
        margin-right: 10%;
      }
      .right-container {
        width: 40%;
      }
    }
  }
}
</style>